<template>
    <div class="addForm">
        <el-form :model="addform" :label-position="labelPosition" :rules="rules" ref="addform">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="addform.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                        <el-radio-group v-model="addform.sex">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
                        <el-input v-model="addform.age" type="number" autocomplete="off">
                            <template slot="append">岁</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="上传照片" :label-width="formLabelWidth">
                        <el-upload action="#" list-type="picture-card" :on-exceed="handleExceed"
                            :on-change="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="false"
                            :limit="1">
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="addImageVisible" :modal="false">
                            <el-image width="100%" :src="addImageUrl" alt="" fit="fill"></el-image>
                        </el-dialog>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="家长姓名" :label-width="formLabelWidth" prop="parent">
                        <el-input v-model="addform.parent" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="家长手机" :label-width="formLabelWidth" prop="phone">
                        <el-input v-model="addform.phone" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="班主任" :label-width="formLabelWidth" prop="teacher">
                        <el-input v-model="addform.teacher" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="班级" :label-width="formLabelWidth" prop="value">
                        <!-- <el-input v-model="addform.theClass" autocomplete="off"></el-input> -->
                        <el-select v-model="addform.value" clearable placeholder="请选择">
                            <el-option v-for="item in classMate" :key="item.id" :label="item.text" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="入学日期" :label-width="formLabelWidth" prop="date">
                        <el-date-picker v-model="addform.date" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4.8" v-for="(item, index) in addform.cardList" :key="index">
                    <el-form-item :label="item.label" label-width="120px">
                        <el-input v-model="item.code" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closed">取 消</el-button>
            <el-button type="primary" @click="addFormAction('addform')">提 交</el-button>
        </div>
    </div>
</template>
<script>
    import {
        INSERT_STUDENT,
        GETCLAZZ
    } from '@/api/api.js'
    export default {
        name: 'addForm',
        props: {
            formLabelWidth: String,
            option: Array,
            labelPosition: String,
            addVisible: Boolean,
            getStudent: {
                type: Function,
                default: null
            },
            schoolCode: Number,
            schoolId: Number
        },
        data() {
            return {
                addform: {
                    name: '',
                    date: '',
                    photo: '',
                    sex: '',
                    age: '',
                    teacher: '',
                    phone: '',
                    parent: '',
                    cardList: [{
                            label: '卡号1',
                            code: ''
                        },
                        {
                            label: '卡号2',
                            code: ''
                        },
                        {
                            label: '卡号3',
                            code: ''
                        },
                        {
                            label: '卡号4',
                            code: ''
                        },
                        {
                            label: '卡号5',
                            code: ''
                        }
                    ],
                    value: ''
                },
                addImageUrl: '',
                addImageVisible: false,
                imgFile: '',
                classMate: [],
                rules: {
                    name: [{
                        required: true,
                        message: '请输入学生姓名',
                        trigger: 'blur'
                    }],
                    sex: [{
                        required: true,
                        message: '请选择性别',
                        trigger: 'change'
                    }],
                    age: [{
                        required: true,
                        message: '请输入年龄',
                        trigger: 'blur'
                    }],
                    teacher: [{
                        required: true,
                        message: '请输入班主任姓名',
                        trigger: 'blur'
                    }],
                    date: [{
                        required: true,
                        message: '请选择入学日期',
                        trigger: 'change'
                    }],
                    parent: [{
                        required: true,
                        message: '请输入家长姓名',
                        trigger: 'blur'
                    }],
                    phone: [{
                        required: true,
                        message: '请输入家长手机',
                        trigger: 'blur'
                    }]
                }
            }
        },
        watch: {
            addVisible(n, o) {
                this.close = n;
            }
        },
        created() {
            this.getClazz()
        },
        methods: {
            // 上传文件个数超过定义的数量
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`)
            },
            // 上传照片
            handleRemove(file) {
                console.log(file);
                file = ''
            },
            handlePictureCardPreview(file) {
                if (file.size > 2097152) {
                    this.$message.warning(`文件大小限制为 2MB，请删除后重新上传`)
                    return false;
                }
                this.addImageUrl = file.url;
                this.imgFile = file
            },
            // 取消
            closed() {
                this.close = false
                this.$emit('toggle-add', this.close);
            },
            // 查询班级
            async getClazz() {
                await this.$GET(`${GETCLAZZ}`, {
                        schoolId: this.schoolId
                    })
                    .then(res => {
                        if (res.code == 200) {
                            let data = []
                            for (let i = 0; i < res.data.length; i++) {
                                let obj = {}
                                obj.id = res.data[i].classId
                                obj.text = res.data[i].className
                                data[i] = obj
                            }
                            this.classMate = data
                        }
                    })
            },
            // 提交新增
            async addFormAction(formName) {
                let that = this
                that.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        let params = new FormData()
                        params.append("name", that.addform.name)
                        let time = (that.$moment(that.addform.date).format()).split('T')[0]
                        params.append("time", time)
                        params.append("schoolCode", that.schoolCode)
                        if (that.addform.photo !== null || that.addform.photo !== undefined || that
                            .addform.photo !== "") {
                            params.append("photoFile", that.imgFile.raw)
                        } else {
                            that.$message({
                                message: '请上传不大于2MB的照片',
                                type: 'error'
                            });
                        }
                        let cardArr = []
                        if (that.addform.cardList[0].code == '' || that.addform.cardList[0].code ==
                            undefined || that.addform.cardList[0].code == null) {
                            this.$message.error('请输入至少一个卡号')
                            return false
                        }
                        for (let i = 0; i < that.addform.cardList.length; i++) {
                            let obj = {}
                            obj.code = that.addform.cardList[i].code
                            cardArr[i] = obj
                        }
                        params.append("sex", that.addform.sex)
                        params.append("age", that.addform.age)
                        params.append("teacher", that.addform.teacher)
                        params.append("classCode", that.addform.value) // 班级名称    *注：目前还没获得幼儿园班级数据，1为小一班
                        params.append("classType", that.addform.value) // 班级类型
                        params.append("phone", that.addform.phone)
                        params.append("userName", that.addform.parent)
                        params.append("cards", JSON.stringify(cardArr))
                        await that.$PUT(`${INSERT_STUDENT}`, params, {
                                header: {
                                    'Content-Type': 'multipart/form-data; charset=utf-8'
                                }
                            })
                            .then(res => {
                                if (res.code == 200) {
                                    that.close = false
                                    that.$emit('toggle-add', that.close);
                                    that.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    });
                                    that.addform.name = ''
                                    that.addform.date = ''
                                    that.addform.photo = ''
                                    that.addform.sex = ''
                                    that.addform.age = ''
                                    that.addform.teacher = ''
                                    that.addform.phone = ''
                                    that.addform.parent = ''
                                    that.addform.value = ''
                                    that.addform.photo = ''
                                    that.addform.cardList = 
                                            [{
                                                label: '卡号1',
                                                code: ''
                                            },
                                            {
                                                label: '卡号2',
                                                code: ''
                                            },
                                            {
                                                label: '卡号3',
                                                code: ''
                                            },
                                            {
                                                label: '卡号4',
                                                code: ''
                                            },
                                            {
                                                label: '卡号5',
                                                code: ''
                                            }
                                        ],
                                        that.getStudent()
                                } else {
                                    that.$message({
                                        message: '添加失败',
                                        type: 'error'
                                    });
                                }
                            })
                            .catch(err => {
                                console.log(err)
                            })
                    } else {
                        this.$message.error('请正确填写表单')
                    }
                })

            }
        }
    }
</script>